<template>
  <div>
    <Row>
      <Card style="text-align: center; width: 1100px; height: 460px;margin-left: 10px">
        <Col span="14">
          <Carousel style="width: 500; height: 400px;" loop>
            <CarouselItem>
              <img :src="'data:image/png;base64,'+shopInfo.logoImg" width="500" height="400" />
            </CarouselItem>
            <CarouselItem>
              <img :src="'data:image/png;base64,'+shopInfo.storeImg" width="500" height="400" />
            </CarouselItem>
            <CarouselItem>
              <img :src="'data:image/png;base64,'+shopInfo.instoreImg" width="500" height="400" />
            </CarouselItem>
          </Carousel>
        </Col>
        <Col span="10">
          <div style="font-size: 18px">
            <Tag color="primary" size="large" style="width:100px;height:25px;font-size: 18px">基本信息</Tag>
            <br />
            <div style="margin-top:20px">
              <span>商店名：</span>
              <Tag
                type="border"
                size="large"
                color="primary"
                style="width:100px;height:25px;font-size: 18px"
              >{{shopInfo.shopName}}</Tag>
              <br />
            </div>
            <div style="margin-top:20px">
              <span>评分：</span>
              <Tag
                type="border"
                size="large"
                color="primary"
                style="width:100px;height:25px;font-size: 18px"
              >{{shopInfo.score}}</Tag>
              <br />
            </div>
            <div style="margin-top:20px">
              <span>商店类型：</span>
              <Tag
                type="border"
                size="large"
                color="primary"
                style="width:100px;height:25px;font-size: 18px"
              >{{shopInfo.shopKind}}</Tag>
              <br />
            </div>
            <div style="margin-top:20px">
              <span>联系人：</span>
              <Tag
                type="border"
                size="large"
                color="primary"
                style="width:100px;height:25px;font-size: 18px"
              >{{shopInfo.contactMan}}</Tag>
              <br />
            </div>
            <div style="margin-top:20px">
              <span>联系电话：</span>
              <Tag
                type="border"
                size="large"
                color="primary"
                style="width:100px;height:25px;font-size: 18px"
              >{{shopInfo.contactMobile}}</Tag>
              <br />
            </div>
            <div style="margin-top:20px">
              <span>配送费：</span>
              <Tag
                type="border"
                size="large"
                color="primary"
                style="width:100px;height:25px;font-size: 18px"
              >{{shopInfo.sendCost}}</Tag>
              <br />
            </div>
            <div style="margin-top:20px">
              <span>餐盒费：</span>
              <Tag
                type="border"
                size="large"
                color="primary"
                style="width:100px;height:25px;font-size: 18px"
              >{{shopInfo.boxCost}}</Tag>
              <br />
            </div>
            <div style="margin-top:20px">
              <span>地址：</span>
              <Tag
                type="border"
                size="large"
                color="primary"
                style="width:200px;height:25px;font-size: 18px"
              >{{shopInfo.address}}</Tag>
            </div>
          </div>
        </Col>
      </Card>
    </Row>
    <br />
    <Row style="margin-left: 400px">
      <Col span="3">
        <Button size="large" icon="md-crop" type="warning" @click="flag1 = true">管理展示图片</Button>
      </Col>
      <Col span="3" offset="3">
        <Button size="large" icon="md-create" type="warning" @click="update1">修改基本信息</Button>
      </Col>
    </Row>

    <Modal title="修改展示图片" width="800px" v-model="flag1" style="height:400px">
      <Row>
        <Col span="8">
          <b style="margin-left:80px;font-size:15px;">logo图片</b>
        </Col>
        <Col span="8">
          <b style="margin-left:80px;font-size:15px;">店铺图片</b>
        </Col>
        <Col span="8">
          <b style="margin-left:80px;font-size:15px;">店内图片</b>
        </Col>
      </Row>
      <br />
      <Row>
        <Col span="8">
          <img :src="'data:image/png;base64,'+shopInfo.logoImg" width="220" height="120" />
        </Col>
        <Col span="8">
          <img :src="'data:image/png;base64,'+shopInfo.storeImg" width="220" height="120" />
        </Col>
        <Col span="8">
          <img :src="'data:image/png;base64,'+shopInfo.instoreImg" width="220" height="120" />
        </Col>
      </Row>
      <br />
      <Row>
        <Col span="8">
          <Upload
            :show-upload-list="false"
            :format="['jpg','jpeg','png']"
            :on-format-error="onError"
            :max-size="2048"
            action="/api/food/upload"
            :on-success="onSuccess1"
          >
            <Button style="margin-left:65px" type="info" icon="ios-cloud-upload-outline">更换图片</Button>
          </Upload>
        </Col>
        <Col span="8">
          <Upload
            :show-upload-list="false"
            :format="['jpg','jpeg','png']"
            :on-format-error="onError"
            :max-size="2048"
            action="/api/food/upload"
            :on-success="onSuccess2"
          >
            <Button style="margin-left:65px" type="info" icon="ios-cloud-upload-outline">更换图片</Button>
          </Upload>
        </Col>
        <Col span="8">
          <Upload
            :show-upload-list="false"
            :format="['jpg','jpeg','png']"
            :on-format-error="onError"
            :max-size="2048"
            action="/api/food/upload"
            :on-success="onSuccess3"
          >
            <Button style="margin-left:65px" type="info" icon="ios-cloud-upload-outline">更换图片</Button>
          </Upload>
        </Col>
      </Row>
      <br />
      <div slot="footer">
        <Button type="primary" ghost size="large" long @click="editImg">修改</Button>
      </div>
    </Modal>

    <Modal title="修改基本信息" v-model="flag2" @on-ok="editBase">
      <Form ref="form" :model="formCustom" :rules="ruleCustom" :label-width="80">
        <FormItem label="商店名" prop="shopName">
          <Input type="text" v-model="form.shopName"></Input>
        </FormItem>
        <FormItem label="商店类型" prop="shopKind">
          <Select v-model="form.shopKind">
            <Option value="美食">美食</Option>
          </Select>
        </FormItem>
        <FormItem label="联系人" prop="contactMan">
          <Input type="text" v-model="form.contactMan"></Input>
        </FormItem>
        <FormItem label="联系电话" prop="contactMobile">
          <Input type="text" v-model="form.contactMobile" number></Input>
        </FormItem>
        <FormItem label="配送费" prop="sendCost">
          <InputNumber :max="5" :min="0" :step="0.5" v-model="form.sendCost"></InputNumber>
        </FormItem>
        <FormItem label="餐盒费" prop="boxCost">
          <InputNumber :max="5" :min="0" :step="0.5" v-model="form.boxCost"></InputNumber>
        </FormItem>
        <FormItem label="地址" prop="address">
          <Input type="text" v-model="form.address"></Input>
        </FormItem>
      </Form>
    </Modal>
  </div>
</template>
<script>
import Vue from "vue";
import { getUser } from "@/libs/util.js";
import * as myShopApi from "@/api/myShop.js";
export default {
  data() {
    return {
      shopId: 0,
      visible: false,
      flag1: false,
      flag2: false,
      shopInfo: {
        name: "",
        storeImg: "",
        logoImg: "",
        instoreImg: ""
      },
      form: {
        shopName: "",
        contactMan: "",
        contactMobile: "",
        sendCost: 0,
        boxCost: 0,
        address: "",
        shopKind: ""
      }
    };
  },
  methods: {
    init: function() {
      myShopApi.getShopInfo(this.shopId).then(res => {
        if (res.data.code == 200) {
          this.shopInfo = res.data.data;
        }
      });
    },
    editBase: function() {
      myShopApi.editBase(this.form).then(res => {
        if (res.data.code == 200) {
          this.$Message.success("修改成功");
          this.init();
        } else {
          this.$Message.error(res.data.message);
        }
      });
    },
    update1: function() {
      this.form.shopId = this.shopInfo.shopId;
      this.form.shopName = this.shopInfo.shopName;
      this.form.shopKind = this.shopInfo.shopKind;
      this.form.contactMan = this.shopInfo.contactMan;
      this.form.contactMobile = this.shopInfo.contactMobile;
      this.form.sendCost = this.shopInfo.sendCost;
      this.form.boxCost = this.shopInfo.boxCost;
      this.form.address = this.shopInfo.address;
      this.flag2 = true;
    },
    editImg: function(){
      myShopApi.updateImg(this.shopInfo).then(res => {
        if(res.data.code == 200) {
          this.flag1 = false;
          this.init();
        }
      })
    },
    onError: function() {
      this.$Message.error("上传失败！请检查文件格式以及大小是否超过2M");
    },
    onSuccess1: function(response, file, fileList) {
      if (response.code == 200) {
        Vue.set(this.shopInfo, "logoImg", response.data);
        this.$Message.success("上传成功");
      }
    },
    onSuccess2: function(response, file, fileList) {
      if (response.code == 200) {
        Vue.set(this.shopInfo, "storeImg", response.data);
        this.$Message.success("上传成功");
      }
    },
    onSuccess3: function(response, file, fileList) {
      if (response.code == 200) {
        Vue.set(this.shopInfo, "instoreImg", response.data);
        this.$Message.success("上传成功");
      }
    }
  },
  mounted() {
    var s = getUser();
    this.shopId = s.slice(4);
    this.init();
  }
};
</script>
<style>
.demo-upload-list {
  display: inline-block;
  width: 150px;
  height: 150px;
  text-align: center;
  line-height: 60px;
  border: 1px solid transparent;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  position: relative;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  margin-right: 4px;
}
.demo-upload-list img {
  width: 100%;
  height: 100%;
}
.demo-upload-list-cover {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.6);
}
.demo-upload-list:hover .demo-upload-list-cover {
  display: block;
}
.demo-upload-list-cover i {
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  margin: 0 2px;
}
</style>
